<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能浴室-登录注册</title>
    <link rel="stylesheet" href="/css/sign.css">
</head>

<body>
<div>
<div class="back">
    <svg width="15px" height="15px" viewBox="0 0 16 16" class="bi bi-chevron-left" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
    </svg>
    <a href="/index">返回</a>
</div>

<div class="login-register">
    <div class="wapper">
        <div class="switch" id="switch">
            <button>密码登录</button>
            <button>注册</button>
        </div>
        <ul class="box" id="box">
            <li class="show">
                <form   method="post">
                    <div class="login-error" id="pwsRrror" style="display: none">
                        <svg width="11px"  height="11px" viewBox="0 0 16 16" class="bi bi-dash-circle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                            <path fill-rule="evenodd" d="M3.5 8a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 0 1H4a.5.5 0 0 1-.5-.5z"/>
                        </svg>
                        <span >账号密码错误</span>
                    </div>
                    <div>
                        <input type="text" name="mobile" id="mobile" placeholder="请输入手机号">
                    </div>
                    <div>
                        <input type="password" name="password" id="password" placeholder="请输入密码">
                    </div>

                    <div>
                        <button class="b-login" th:onclick="login()" type="button">登录</button>
                    </div>
<!--                    <div class="checkbox">-->
<!--                        <input class="checkbox" type="checkbox">-->
<!--                        <span> 下次自动登录</span>-->
<!--                    </div>-->
                </form>
            </li>
            <li class="regi" >
                <form action="/app/register" method="post">
                    <div>
                        <input type="text" id="nickName" name="name" placeholder="请输入用户名">
                    </div>
                    <div>
                        <input type="password" id="regipwd" name="password" placeholder="请输入密码">
                    </div>
                    <div>
                        <input type="password" id="regipwd2" placeholder="确认密码">
                    </div>
                    <div>
                        <input type="text" id="regiMobile" name="mobile" placeholder="手机号">
                    </div>
                    <div>
                        <input type="text" id="sex" name="sex" placeholder="性别">
                    </div>
                    <div>
                        <input type="text" id="school" name="school" placeholder="学校">
                    </div>
                    <div>
                        <input type="text" id="campusCard" name="campusCard" placeholder="校园卡">
                    </div>
                    <div>
                        <button th:onclick="register()" type="button">注册</button>
                    </div>

                </form>
            </li>
        </ul>
    </div>
</div>
</div>
</body>
<script type="text/javascript" th:inline="javascript">
    //注册登录窗口切换
    let buttonList = document.getElementById("switch").children;
    let box = document.getElementById("box").children;
    for (let index = 0; index < buttonList.length; index++) {
        buttonList[index].addEventListener("click", function () {
            // if(box[i].className!=="show"){
            //     box[i].className = "show";
            // }else{
            //     box[i].className = "regi";
            // }
            for (let i = 0; i < buttonList.length; i++) {
                buttonList[i].removeAttribute("class");
                box[i].removeAttribute('class');
            }
            this.className = "current-button";
            box[index].className = "show";
        });

    }
    //表单不为空提示
    function validatedNull(e){
        let value = e.target.value;
        if (pwdRrror.style.display==='inline-block'){
            pwdRrror.style.display = 'none'
        }
        if(value.trim()===null||value.trim()===""){
            e.target.style.borderColor= "red";
        }else{
            e.target.style.borderColor= "#E2E2E2";
        }
    }
    let inputdom = document.querySelectorAll("input");
    //事件监听
    inputdom.forEach(element => {
        element.addEventListener('blur',validatedNull);
    });
    function  getDomById(Id) {
        return document.getElementById(Id);
    }
     let pwdRrror = getDomById("pwsRrror");
    let pwd = getDomById("regipwd");
    let pwd2 = getDomById("regipwd2");

    pwd2.addEventListener('blur',()=>{
        if (pwd.value!==pwd2.value){
            alert("两次密码不一致！");
        }
    })


    const phone = getDomById("regiMobile");

    var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
    phone.addEventListener('blur',()=>{
        if (!myreg.test(phone.value)){
            alert("手机格式不正确");
        }
    })
    /**
     * 登录
     */
    function  login() {
        let mobile = getDomById("mobile");
        let password = getDomById("password");

        let mobileValue = mobile.value;
        let passwordValue = password.value;
        let data={
            mobile:mobileValue,
            password:passwordValue
        }
        console.log(passwordValue);
        let url = "http://localhost:8080/app/authenticate";
        fetch(url, {
            method: 'POST', // or 'PUT'
            body: JSON.stringify(data), // data can be `string` or {object}!
            headers: new Headers({
                'Content-Type': 'application/json'
            })
        }).then(res => res.json())
            .catch(error => console.error('Error:', error))
            .then(response =>{
                console.log(response);

                let returnData = response;
                if (returnData.result) {
                   // window.alert(returnData.message);

                  window.localStorage.setItem("userInfo",JSON.stringify(returnData.user));
                  console.log("user:",returnData.user);
                  let user = JSON.parse(window.localStorage.getItem("userInfo"));
                  console.log(user,"get");
                  window.location.href="/index";

                }else {
                    pwdRrror.style.display = 'inline-block';
                    //window.alert(returnData.message);
                }
            });
    }
    /**
    *  注册
     */
    async function register() {
        let url = "http://localhost:8080/app/register";
        let nickName = getDomById("nickName");
        let regipwd = getDomById("regipwd");
        let regimobile = getDomById("regiMobile");
        let sex = getDomById("sex");
        let school = getDomById("school");
        let campusCard = getDomById("campusCard");
        let data={
            loginName:nickName.value,
             mobile:regimobile.value,
            password: regipwd.value,
            sex:sex.value,
            school:school.value,
            campusCard:campusCard.value
        }
         let res = await fetch(url,{
            method:"POST",
            body:JSON.stringify(data),
            headers:new Headers({
                'Content-Type': 'application/json'
            })
        });
        console.log(res);
        if (res.status>=200&&res.status<=300){
             let resJson = await res.json();
             console.log(resJson);
             if (resJson.result) {
                 window.alert("注册成功");
             }else {
                 window.alert(resJson.message);
             }
        }
        
    }
</script>

</html>